@import '../../public/variables.less';
.tmc_uploader_content {
	position: relative;
	display: inline-block;
	.tmc_uploader_open {
		width: 28px;
		height: 28px;
		line-height: 26px;
		text-align: center;
		display: inline-block;
		border: 1px solid #d9d9d9;
		border-radius: 2px;
		background: @w-color;
		cursor: default;
		.iconfont {
			font-size: 12px;
		}
		.icon-youfujian {
			color: @b-color;
		}
		.icon-wufujian {
			color: #d9d9d9;
		}
		&:hover {
			border: 1px solid @t-btn-bgcolor;
			.icon-youfujian {
				color: @t-btn-bgcolor;
			}
			.icon-wufujian {
				color: @t-btn-bgcolor;
			}
		}
		&:active {
			border: 1px solid @t-btn-bgcolor;
			background: @t-btn-lightbgcolor;
			.icon-youfujian {
				color: @t-btn-bgcolor;
			}
			.icon-wufujian {
				color: @t-btn-bgcolor;
			}
		}
	}
	.tmc_uploader_files {
		position: absolute;
		//right: 0;
		left:0;
		top: 32px;
		z-index: 100000;
		width: 400px;
		height: 210px;
		padding: 10px 0;
		border: 1px solid #e3e7ed;
		border-radius: 2px;
		box-shadow: 1px 2px 1px #e3e7ed;
		background: @w-color;

		.head {
			height: 30px;
			line-height: 20px;
			padding: 0 10px;
			display: flex;
			justify-content: flex-start;
			align-items: flex-start;
			border-bottom: 1px solid #e3e7ed;
			position: relative;
			.title {
				display: inline-block;
				font-size: 13px;
				font-weight: bold;
				color: @b-color;
			}
			.btn {
				height: 20px !important;
				min-width: 60px !important;
				width: 60px !important;
				margin-left: 10px;
				padding: 0;
				line-height: 20px !important;
				text-align: center;
				font-size: 12px !important;
				background: @t-btn-bgcolor !important;
				color: @w-color !important;
				border: none !important;
			}
			.info {
				display: inline-block;
				margin-left: 10px;
				.file_info_name {
					display: block;
					float: left;
					overflow-x: hidden;
					width: 170px;
					white-space: nowrap;
					text-overflow: ellipsis;
					height: 20px;
					line-height: 20px;
				}
				.info_msg{
					height: 20px;
					line-height: 20px;
				}
				.error-color {
					color: @t-tab-color;
				}
				.success-color {
					color: @t-btn-bgcolor;
				}
			}
			.uf {
				float: right;
				color: @b-color;
				font-size: 14px !important;
				position: absolute;
				right: 5px;
				top: 0;
			}
		}
		.content {
			height: 168px;
			padding: 0 10px;
			overflow-x: hidden;
			overflow-y: auto;
			.tmc_uploader_fileList {
				display: flex;
				justify-content: flex-start;
				flex-direction: row;
				flex-wrap: wrap;
				.tmc_uploadr_item_content {
					width: 90px;
					height: 66px;
					margin-top: 15px;
					padding: 10px 6px;
					position: relative;
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					border-radius: 4px;
					&:hover {
						background: #f2f2f2;
						.display_type {
							display: block;
						}
					}
					.tmc_file_ico {
						width: 24px;
						height: 30px;
					}
					.tmc_file_name {
						width: 100%;
						font-size: 10px !important;
						padding: 2px 0;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
						text-align: center;
						cursor: default;
					}
					.tmc_uploader_del {
						position: absolute;
						width: 16px;
						height: 16px;
						line-height: 16px;
						border-radius: 50%;
						text-align: center;
						padding: 0;
						font-size: 10px !important;
						right: -6px;
						top: -6px;
						background: #f04134;
						color: @w-color;
					}
					.display_type {
						display: none;
					}
				}
			}
		}
	}
}
